<template>
    <div class="bottombar-box">
        <div class="checked">
            <div></div>
            <span>全选({{size}})</span>
        </div>
        <div class="price">
            ￥{{price}}
        </div>
        <div class="click">
            <div>去结算</div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            size:0,
            price:"0.00",
        }
    }
}
</script>

<style lang="less" scoped>
    .bottombar-box{
        height: @h;
        width: 100%;
        background: @white;
        position: absolute;
        bottom: 0px;
        border-top:1PX solid @99;
        display: flex;
        z-index: 100;
        font-size: 30px;
        .checked{
            line-height: @h;
            flex-grow: 1.9;
            text-align: right;
            position: relative;
            div{
                background: url('../assets/checkbox.png');
                background-position: bottom;
                width: @h - 0.8rem;
                height: @h - 0.8rem;
                position: absolute;
                top: 0.4rem;
                left: 0.4rem;
                background-size: 100% auto;
            }
        }
        .price{
            flex-grow: 5;
            padding: 0.2rem 0.3rem;
            line-height: @h - 0.4rem;
            box-sizing: border-box;
            color: @pink;
        }
        .click{
            flex-grow: 3.5;
            text-align: center;
            padding-top:0.2rem;
            box-sizing: border-box;
            margin-right: 20px;
            margin-left: 20px;

            div{
                height: @h - 0.4rem;
                background: @pink;
                line-height: @h - 0.4rem;
                border-radius: 10px;
                color: @white;
            }
        }
    }
</style>
